<template>
  <uni-popup ref="tipRef" type="dialog">
    <uni-popup-dialog ref="inputClose" mode="base" :title="props.title" :confirmText="props.confirmText" @confirm="confirmHandler" @close="closeHandler">
      <view class="tip-box">
        <view class="tip-text">
          {{ props.content }}
        </view>
        <uni-data-checkbox multiple v-model="checker" :localdata="tipCheckList"></uni-data-checkbox>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup name="tipPopup">
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import useTipStore from "@/store/modules/tip.js";

const tipStore = useTipStore();
const { tipChecker } = storeToRefs(tipStore);

const emit = defineEmits(["confirmEvent", "closeEvent"]);

let props = defineProps({
  title: {
    type: String,
    default: "提示",
  },
  content: {
    type: String,
    default: "",
  },
  confirmText: {
    type: String,
    default: "确定",
  },
  // 用于存储再本地的标识符
  tipId: {
    type: String,
  },
});

// 弹窗实例
const tipRef = ref();

// 不在提醒的选择框数据
let checker = ref();

// 不在提醒选择框的数据源
const tipCheckList = [
  {
    text: "不再提醒",
    value: true,
  },
];

// 打开弹窗
const open = () => {
  if (!tipChecker.value[props.tipId]) tipRef.value.open();
};

// 关闭弹窗
const close = () => {
  tipRef.value.close();
};

watch(
  () => checker.value,
  (newV) => {
    if (newV.length === 1) {
      tipStore.tipCheckerSwitch(props.tipId, true);
    } else {
      tipStore.tipCheckerSwitch(props.tipId, false);
    }
  }
);

// 点击确定事件回调
const confirmHandler = () => {
  emit("confirmEvent");
};

// 点击取消事件回调
const closeHandler = () => {
  emit("closeEvent");
};

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.tip-box {
  display: flex;
  flex-direction: column;
  .tip-text {
    font-size: $uni-font-size-base;
    color: #6c6c6c;
    margin-bottom: 20rpx;
  }
}
</style>
